<!--
 * new page
 * @author: zhuangming
 * @since: 2025-02-21
 * dayOrder.vue
-->
<template>
  <view class="container">
    <view>
      <view style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        ">
        <uni-datetime-picker v-model="selectedDate" type="daterange" />
        <u-button style="width: 80px; height: 36px; margin-left: 10px" type="primary" @click="getDayOrder"
          text="搜索"></u-button>
      </view>
      <view class="order-top">
        <view class="order_top_div">
          <span>商户收入：</span>
          <span>{{ totalPrice }}</span>
        </view>
        <view class="order_top_div">
          <span>商户支出：</span>
          <span>{{ refundTotalPrice }}</span>
        </view>
      </view>
      <view class="order_bot_div">
        <span>平台手续费：</span>
        <span>{{ Number(platformCommissionRate).toFixed(2) }}</span>
      </view>
      <view class="order_list">
        <view v-for="(order, index) in orders" :key="index" class="order_item" @click="goDetail(order)">
          <view class="order_item_div">
            <span>订单日期：</span>
            <span>{{ order.dat }}</span>
          </view>
          <view class="order_item_div">
            <span>账期内收入：</span>
            <span>{{ order.totalPrice }}</span>
          </view>
          <view class="order_item_div">
            <span>账期内支出：</span>
            <span>{{ order.refundPrice }}</span>
          </view>
          <view class="order_item_div">
            <span>账户应入账金额：</span>
            <span>{{ Number(order.receivableTotalPrice).toFixed(2) }}</span>
          </view>
          <view class="order_item_div">
            <span>平台手续费</span>
            <span>{{ Number(order.platformCommissionRate).toFixed(2) }}</span>
          </view>
          <view class="order_item_div">
            <span>总共<span style="color: red; margin: 0 5px">
                {{ order.count }} </span>笔</span>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { dayOrderIndex } from "../../utils/merorder/mer";
export default {
  data() {
    return {
      selectedDate: "", // 默认选中当前日期
      platformCommissionRate: "", //平台手续费
      refundTotalPrice: "", //商户支出
      totalPrice: "", //商户收入
      orders: [
        {
          dat: "",
          platformCommissionRate: "", //平台手续费
          receivableTotalPrice: "", //商户应入账金额
          refundPrice: "", //账期内支出
          totalPrice: "", //商户收入
        },
      ],
    };
  },
  methods: {
    // 查询订单列表
    getDayOrder() {
      const params = {
        dateParam:
          this.selectedDate[0].replace(/-/g, "/") +
          "-" +
          this.selectedDate[1].replace(/-/g, "/"),
        merId: uni.getStorageSync("merId") || 0,
        queryType: "3",
      };
      dayOrderIndex(params).then((res) => {
        this.orders = res.data.ebmerBillVoList;
        this.platformCommissionRate = res.data.platformCommissionRate;
        this.refundTotalPrice = res.data.refundTotalPrice;
        this.totalPrice = res.data.totalPrice;
      });
    },
    // 跳转订单详情
    goDetail(order) {
      console.log("🚀 ~ goDetail ~ order:", order)
      uni.navigateTo({
        url: "/pages_sh/myOrder/index-daling?ids=" + order.ids,
      });
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
}

.order-top {
  display: flex;
  justify-content: space-between;
  padding: 10px 0px;
  background-color: #f5f5f5;
}

.order_top_div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42%;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 10px;
}

.order_bot_div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42%;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 10px;
}

.order_list {
  margin-top: 20px;
}

.order_item {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10rpx;
}

.order_item_div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
</style>
